import Vue from 'vue'
import VueRouter from 'vue-router'

// const Index = () => {
//   import ('../components/Index.vue')
// }
// const About = () => {
//   import ('../components/About.vue')
// }
// const User = () => {
//   import ('../components/User.vue')
// }

import Index from '../components/Index.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
import Home from '../components/Home.vue'
import HomeMessage from '../components/HomeMessage.vue'
import HomeNews from '../components/HomeNews.vue'
import Profile from '../components/Profile.vue'
import ProfileParams from '../components/ProfileParams.vue'
import ProfileQuery from '../components/ProfileQuery.vue'

// 使用插件
Vue.use(VueRouter)

// 配置映射关系
const routes = [
  { path: '/', redirect: '/index' },
  { path: '/index', component: Index, meta: { title: '首页' } },
  { path: '/about', component: About, meta: { title: '关于' } },
  { path: '/user/:id', component: User, meta: { title: '用户' } },
  {
    path: '/home',
    component: Home,
    children: [
      { path: '', redirect: 'message', meta: { title: '家目录' } },
      { path: 'message', component: HomeMessage, meta: { title: '家目录' } },
      { path: 'news', component: HomeNews, meta: { title: '家目录' } }
    ],
  },
  {
    path: '/profile',
    component: Profile,
    children: [
      { path: "", redirect: 'query', meta: { title: 'Profile' } },
      { path: "params/:uname", component: ProfileParams, meta: { title: 'Profile' } },
      { path: 'query', component: ProfileQuery, meta: { title: 'Profile' } },
    ],
  }
]

const router = new VueRouter({
  routes,
  mode: 'history',
  linkExactActiveClass: 'cuifan'
})

// 使用导航守卫，监听路由的跳转
router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title
    // console.log('路由改变前');
  next() // 改变路由
})

// router.afterEach((to, from) => {
//   console.log('路由改变后');
// })
export default router